import styled from 'styled-components'

interface WrapProps {
	isCascade: boolean
	nestingLevel: number
	isVip: boolean
	isOnline: boolean
	isMeeting: boolean
	isSelected: boolean
	isAll: boolean
}
export const ItemLabelWrap = styled.div.attrs(({ isSelected, isMeeting, isAll }: WrapProps) => {
	return { className: `${isSelected ? 'selected' : ''}` }
})<WrapProps>`
	display: flex;
	flex: 1;
	align-items: center;
	height: 38px;
	box-sizing: border-box;
	padding-left: ${(props) => {
		if (props.nestingLevel === 0) {
			if (props.isAll) {
				/**全部终端有展开图标*/
				if (!props.isCascade) {
					/**代表简单级联和普通终端*/
					return `26px`
				} else {
					return `${props.nestingLevel * 22 + 4}px`
				}
			} else {
				/**互动或全部第一级别*/
				return `26px`
			}
		} else {
			// if (!props.isMeeting) {
			// 	return `${props.nestingLevel * 22 + 4 + 31}px`
			// } else {
			// 	return `${props.nestingLevel * 22 + (props.nestingLevel > 0 ? 10 : 0) + 4}px`
			// }
			if (props.isAll) {
				/**全部终端有展开图标*/
				if (!props.isCascade) {
					/**代表简单级联和普通终端*/
					return `${props.nestingLevel * 22 + 4 + 31}px`
				} else {
					return `${props.nestingLevel * 22 + (props.nestingLevel > 0 ? 10 : 0) + 4}px`
				}
			} else {
				/**互动或全部第一级别*/
				return `26px`
			}
		}
	}};
	overflow: hidden;
	user-select: none;
	&:hover {
		background: linear-gradient(90deg, #2d8bc0, #53afe4) !important;
		.name {
			color: #fff;
		}
		.icon-yes {
			background-position: -344px -1671px !important;
		}
	}
	&.selected {
		background: linear-gradient(90deg, #2d8bc0, #53afe4);
		.name {
			color: #fff;
		}
	}
	.icon-yes {
		position: absolute;
		top: 12px;
		top: 5px;
		left: -21px;
	}
	.icon-toggle {
		flex: 0 0 14px;
		margin-right: 7px;
	}
	.icon-checked {
		/* flex: 0 0 14px;
		margin-right: 7px; */
		position: absolute;
		top: 12px;
		left: ${(props) => {
			if (props.isOnline && props.isMeeting) {
				return `${props.nestingLevel * 22 + 6}px`
			} else {
				return `${props.nestingLevel * 22 + (props.nestingLevel > 0 ? 10 : 0) + 6}px`
			}
		}};
	}
	.avatar {
		flex: 0 0 24px;
		display: flex;
		align-items: center;
		position: relative;
		margin-right: 8px;
		.icon-often {
			position: absolute;
			bottom: -2px;
			right: 0;
		}
	}
	.vip {
		flex: 0 0 26px;
		height: 15px;
		background-color: #5eb9ef;
		color: #ffffff;
		line-height: 15px;
		text-align: center;
		margin-right: 8px;
	}
	.name {
		color: ${(props) => (props.isOnline ? (false ? `#2C8DC5` : `#000`) : `#959697`)};
		overflow: hidden;
		&.active-polling {
			color: #2bb7ff;
			font-weight: bold;
		}
		pre {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
`
export const StyledMemberList = styled.div<{ height?: number }>`
	min-width: 213px;
	.member-tab {
		.kd-tab-item {
			width: 105px;
		}
	}
	.member-list {
		height: ${(props) => props.height ?? 390}px;
		overflow: auto;
		.list-item {
			height: 34px;
			line-height: 34px;
			cursor: pointer;
			user-select: none;
			.name {
				margin-left: 10px;
			}
		}
	}
`
